.breadcrumb 
  $h: 36px

  text-align: center
  /*centering*/
  +inline-block
  +box-shadow(0 0 15px 1px rgba(0, 0, 0, 0.35))
  overflow: hidden
  +border-radius(5px)
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag

  a
    text-decoration: none
    outline: none
    display: block
    float: left
    font-size: 12px
    line-height: $h
    color: white
    /*need more margin on the left of links to accomodate the numbers*/
    padding: 0 10px 0 60px
    background: #666
    background: linear-gradient(#666, #333)
    position: relative
  a:first-child
    padding-left: 46px
    +border-radius(5px 0 0 5px) /*to match with the parent's radius*/
  a:first-child:before
    left: 14px
  a:last-child
    +border-radius(0 5px 5px 0) /*this was to prevent glitches on hover*/
    padding-right: 20px

  a.active, a:hover
    background: #333
    background: linear-gradient(#333, #000)
  a.active:after, a:hover:after 
    background: #333
    background: linear-gradient(135deg, #333, #000)

  a:after 
    content: ''
    position: absolute
    top: 0
    right: -$h/2
    /*same dimension as the line-height of .breadcrumb a */
    width: $h
    height: $h
    +transform(scale(0.707) rotate(45deg))
    /*we need to prevent the arrows from getting buried under the next link*/
    z-index: 1
    /*background same as links but the gradient will be rotated to compensate with the transform applied */
    background: #666
    background: linear-gradient(135deg, #666, #333)
    /*stylish arrow design using box shadow*/
    +box-shadow(2px -2px 0 2px rgba(0, 0, 0, 0.4), 3px -3px 0 2px rgba(255, 255, 255, 0.1))
    /* 5px - for rounded arrows and 50px - to prevent hover glitches on the border created using shadows */
    +border-radius(0 5px 0 50px)
  a:last-child:after 
    content: none
  a:before 
    content: counter(flag)
    counter-increment: flag
    /*some styles now*/
    +border-radius(100%)
    width: 20px
    height: 20px
    line-height: 20px
    margin: ($h - 20)/2 0
    position: absolute
    top: 0
    left: 30px
    background: #444
    background: linear-gradient(#444, #222)
    font-weight: bold

.flat 
  a, a:after 
    background: white
    color: black
    +transition(all 0.2s)
  a:before
    background: white
    +box-shadow(0 0 0 1px #ccc)
  a:hover, a.active, a:hover:after, a.active:after
    background: #9EEB62
